<script setup>
const props = defineProps({
  modelValue: {
    required: true
  },
  field: {
    type: String,
    required: true
  },
  label: {
    type: String,
    required: true
  },
  rules: {
    type: Array,
    default: () => []
  },
  type: {
    type: String,
    default: 'text'
  },
  placeholder: String,
  readonly: Boolean,
  disabled: Boolean,
  showPassword: Boolean,
  clearable: Boolean,
  enterable: Boolean
})

const emit = defineEmits(['update:modelValue', 'keyup-enter'])
</script>

<template>
  <el-form-item :label="label" :rules="rules" :prop="field">
    <el-input
        :model-value="modelValue"
        @update:modelValue="emit('update:modelValue', $event)"
        :type="type"
        :placeholder="placeholder || label"
        :readonly="readonly"
        :disabled="disabled"
        :show-password="showPassword"
        :clearable="clearable || true"
        @keyup.enter="emit('keyup-enter')"
    />
  </el-form-item>
</template>
